﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>车间生产日报</title>
    <style>
        html, body {
            margin: 0;
            background-color: #F7F7F7;
        }

        .form {
            margin: 15px;
            background-color: #FFF;
            border-radius: 10px;
        }

        .row {
            text-align: left;
            color: #1e1e1e;
            padding: 15px 20px;
            border-bottom: 1px solid #F6F6F6;
        }

            .row span {
                float: right;
            }

        .card {
            margin: 15px;
            background-color: #FFF;
            border-radius: 10px;
        }

            .card .card-header {
                border-bottom: 1px solid #F6F6F6;
                padding: 15px 20px;
                font-weight: bold;
            }
    </style>
</head>
<body>
    <div class="form">
        <div class="row">
            <label>车间：</label>
            <span>M01车间</span>
        </div>
        <div class="row">
            <label>产线：</label>
            <span>A线</span>
        </div>
        <div class="row">
            <label>生产日期：</label>
            <span>2023-03-27</span>
        </div>
    </div>
    <div class="card">
        <div class="card-header">
            各站点产量
        </div>
        <div class="card-body" id="chart1" style="width: 100%;height:300px;"></div>
    </div>
    <div class="card">
        <div class="card-header">
            IV分布
        </div>
        <div class="card-body" id="chart2" style="width: 100%;height:300px;"></div>
    </div>
    <div class="card">
        <div class="card-header">
            FPY
        </div>
        <div class="card-body" id="chart3" style="width: 100%;height:300px;"></div>
    </div>
    <div class="card">
        <div class="card-header">
            EL1合格率
        </div>
        <div class="card-body" id="chart4" style="width: 100%;height:300px;"></div>
    </div>
    <div class="card">
        <div class="card-header">
            层压出料合格率
        </div>
        <div class="card-body" id="chart5" style="width: 100%;height:300px;"></div>
    </div>
    <div class="card">
        <div class="card-header">
            终检合格率
        </div>
        <div class="card-body" id="chart6" style="width: 100%;height:300px;"></div>
    </div>

    <script src="echarts/echarts.min.js"></script>
    <script>
        echarts.init(document.getElementById('chart1')).setOption({
            dataZoom: [{
                type: 'slider',
                show: true,
                start: 0,
                end: 50,
                xAxisIndex: [0],
                bottom: "10%"
            }],
            grid: {
                top: "10%",
                bottom: "30%"
            },
            xAxis: {
                data: ['焊接', '叠层', 'EL1', '层压', 'NQC', '装框', '清洗', 'IV', '绝缘耐压', 'EL2', '铭牌', '终检', '打包'],
                axisLabel: {
                    interval: 0,
                    rotate: 30
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: true
                },
                z: 10
            },
            yAxis: {
                show: false,
            },
            series: [
                {
                    type: 'bar',
                    showBackground: true,
                    itemStyle: {
                        normal: {
                            label: {
                                show: true, //开启显示
                                position: 'top', //在上方显示
                                textStyle: {
                                    //数值样式
                                    color: 'black',
                                    fontSize: 12,
                                },
                            },
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: '#83bff6' },
                                { offset: 0.5, color: '#188df0' },
                                { offset: 1, color: '#188df0' }
                            ])
                        }
                    },
                    emphasis: {
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: '#2378f7' },
                                { offset: 0.7, color: '#2378f7' },
                                { offset: 1, color: '#83bff6' }
                            ])
                        }
                    },
                    data: [2000, 2000, 1900, 1950, 1990, 1980, 1988, 1950, 1990, 1980, 1988, 1950, 1990]
                }
            ]
        });

        echarts.init(document.getElementById('chart2')).setOption({
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '5%',
                left: 'center'
            },
            series: [
                {
                    name: 'IV分布',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 40,
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: 80, name: '450W', itemStyle: { color: "#9FE080" } },
                        { value: 20, name: '430W', itemStyle: { color: "#73C0DE" } }
                    ]
                }
            ]
        });

        echarts.init(document.getElementById('chart3')).setOption({
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '5%',
                left: 'center'
            },
            series: [
                {
                    name: 'FPY',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 40,
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: 99, name: '合格', itemStyle: { color: "#FAC958" } },
                        { value: 1, name: '不合格', itemStyle: { color: "#EE6666" } }
                    ]
                }
            ]
        });

        echarts.init(document.getElementById('chart4')).setOption({
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '5%',
                left: 'center'
            },
            series: [
                {
                    name: 'EL1合格率',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 40,
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: 90, name: '合格', itemStyle: { color: "#FAC958" } },
                        { value: 10, name: '不合格', itemStyle: { color: "#EE6666" } }
                    ]
                }
            ]
        });

        echarts.init(document.getElementById('chart5')).setOption({
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '5%',
                left: 'center'
            },
            series: [
                {
                    name: '层压出料合格率',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 40,
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: 85, name: '合格', itemStyle: { color: "#FAC958" } },
                        { value: 15, name: '不合格', itemStyle: { color: "#EE6666" } }
                    ]
                }
            ]
        });

        echarts.init(document.getElementById('chart6')).setOption({
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '5%',
                left: 'center'
            },
            series: [
                {
                    name: '终检合格率',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 40,
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: 95, name: '合格', itemStyle: { color: "#FAC958" } },
                        { value: 5, name: '不合格', itemStyle: { color: "#EE6666" } }
                    ]
                }
            ]
        });

    </script>
</body>
</html>